Interactive Web
Discover the Depths of Electronic Dance Music
Project Type Student UI/UX Project
Duration January–April 2024
Role Lead; Self-Directed
Summary
Numerous niches and sub-genres within electronic dance music are worth exploring by enthusiasts who want to learn more about the music. This website provides an interactive platform for music enthusiasts to explore the various sub-genres of electronic dance music, allowing them to learn about the depths of electronic dance music and find new music within them.
Goal
To inform electronic dance music enthusiasts about the sub-genres of electronic dance music and the different music within the sub-genres engagingly and smoothly.
Challenge
As an electronic dance music listener, I want to learn more about all the different
sub-genres within its umbrella. However, I found there was a shortage of engaging websites and consistency of reliable information to learn from. The challenge is to design a user-friendly website that not only engages visitors but also displays the content about the music in a clear and accurate way.
Methods & Findings
A target audience was established from the beginning: avid electronic music listeners, individuals interested in getting into electronic music, DJs and music producers. Through this knowledge, a survey was created to develop further insight and promoted to those who feel connected to the electronic dance music scene. Despite limited responses, two user personas were created: a young DJ who wants to study the sub-genres of electronic dance music for his profession and a middle-aged individual who wants to rediscover her lost passion for electronic dance music.
Low-Fidelity Wireframes
Medium-Fidelity Wireframes
Design Process
When starting the interface designing stage, I sketched out low-fidelity wireframes and then digitalized them into medium-fidelity wireframes, giving me a clearer idea of how content would be laid out. I developed a rough visual identity but modified it during the high-fidelity phase.
Visual Identity
High-Fidelity Wireframes
Result
A cohesive system has been developed to present electronic dance music content in a legible and engaging way. By using grid systems and typographic hierarchy, the interface is user-friendly. Colours are revealed when the website is interacted with, enhancing the website's enjoyment of usability. This website is an excellent resource for electronic dance music enthusiasts, including avid listeners, DJs, producers, and individuals seeking to gain more knowledge of the music. This project has been given a solid foundation to build upon, allowing for additional sub-genre pages and potentially individual pages for
sub-genres within the sub-genres.
User Testing Reflection
When conducting user testing, I couldn't access my target audience; electronic dance music listeners. Regardless, the two users I tested gave me valuable feedback that I integrated into my outcome. As a result of the user testing, significant changes were made to the website. The navigation bar, for instance, was transformed from a closed 3-section box to a more open and breathable section at the top of the website. Each sub-genre was colour-coded, adding a corresponding colour for each arrow button and abstract line. The arrow buttons on the home page were animated with a pushing effect rather than an instant effect. Additionally, text was added on the scrolling pages to indicate that the user can scroll down for further content. These changes have not only enhanced the website's functionality but also its visual appeal. Overall, the feedback received from both users indicated they were satisfied with the website's usability alongside constructive suggestions, which I implemented in my outcome.
Content Source
The descriptions of each sub-genre were sourced from a collection of electronic dance music platforms, predominantly Armada Music, further supported by Generative AI.
Artist descriptions were obtained from Apple Music and Spotify.
